import React from "react";
import { Button, Card, Alert } from "antd";

interface TourStep {
  target: string;
  content: React.ReactNode;
  placement: "top" | "right" | "bottom" | "left";
  title: string;
}

interface TourGuideProps {
  showTour: boolean;
  tourStep: number;
  tourSteps: TourStep[];
  onSkipTour: () => void;
  onNextStep: () => void;
  onPrevStep: () => void;
}

const TourGuide: React.FC<TourGuideProps> = ({
  showTour,
  tourStep,
  tourSteps,
  onSkipTour,
  onNextStep,
  onPrevStep,
}) => {
  if (!showTour) return null;

  const currentStep = tourSteps[tourStep];
  const targetElement = document.querySelector(currentStep.target);

  if (!targetElement) return null;

  const rect = targetElement.getBoundingClientRect();

  const calculateTooltipPosition = () => {
    const tooltipWidth = 380;
    const tooltipHeight = 400;
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    const padding = 20;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollLeft =
      window.pageXOffset || document.documentElement.scrollLeft;

    let top = rect.top + scrollTop;
    let left = rect.left + scrollLeft;

    switch (currentStep.placement) {
      case "right":
        left = rect.right + scrollLeft + padding;
        break;
      case "left":
        left = rect.left + scrollLeft - tooltipWidth - padding;
        break;
      case "bottom":
        top = rect.bottom + scrollTop + padding;
        left = rect.left + scrollLeft + (rect.width - tooltipWidth) / 2;
        break;
      case "top":
        top = rect.top + scrollTop - tooltipHeight - padding;
        left = rect.left + scrollLeft + (rect.width - tooltipWidth) / 2;
        break;
    }

    if (left < padding) {
      left = padding;
    } else if (left + tooltipWidth > viewportWidth - padding) {
      left = viewportWidth - tooltipWidth - padding;
    }

    if (top < scrollTop + padding) {
      top = scrollTop + padding;
    } else if (top + tooltipHeight > scrollTop + viewportHeight - padding) {
      top = scrollTop + viewportHeight - tooltipHeight - padding;
    }

    return { top, left };
  };

  const tooltipPosition = calculateTooltipPosition();

  return (
    <>
      {/* 遮罩层 */}
      <div
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100vw",
          height: "100vh",
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 9998,
          pointerEvents: "none",
        }}
      />

      {/* 高亮区域 */}
      <div
        style={{
          position: "fixed",
          top: rect.top - 8,
          left: rect.left - 8,
          width: rect.width + 16,
          height: rect.height + 16,
          border: "3px solid #1890ff",
          borderRadius: "8px",
          backgroundColor: "transparent",
          zIndex: 9999,
          pointerEvents: "none",
          boxShadow: `
            0 0 0 8px rgba(24, 144, 255, 0.2),
            0 0 0 9999px rgba(0, 0, 0, 0.5)
          `,
        }}
      />

      {/* 引导提示框 */}
      <Card
        title={currentStep.title}
        style={{
          position: "absolute",
          top: tooltipPosition.top,
          left: tooltipPosition.left,
          width: "380px",
          maxHeight: "400px",
          zIndex: 10000,
          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
        }}
        actions={[
          <Button key="skip" onClick={onSkipTour}>
            跳过引导
          </Button>,
          <Button key="prev" onClick={onPrevStep} disabled={tourStep === 0}>
            上一步
          </Button>,
          <Button key="next" type="primary" onClick={onNextStep}>
            {tourStep === tourSteps.length - 1 ? "完成" : "下一步"}
          </Button>,
        ]}
      >
        <div style={{ maxHeight: "250px", overflowY: "auto" }}>
          {currentStep.content}
        </div>
        <div style={{ textAlign: "center", marginTop: "12px", color: "#666" }}>
          第 {tourStep + 1} 步，共 {tourSteps.length} 步
        </div>
      </Card>
    </>
  );
};

export default TourGuide;
